<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Echarts - 实例</title>
	<link rel="stylesheet" href="../element/static/css/element2.css">
	<script src="../element/static/js/vue.global.prod.js"></script>
	<script src="../element/static/js/element-plue2.js"></script>
	
	<script src="../element/static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../element/static/css/index.css">
</head>
<style>
.a-system{
	text-decoration: none;
}
</style>
<body>
<div id="app" class="">
	<el-container class="layout-container-body" style="height: 100%">
		<!-- 头部 -->
		<el-header style="padding: 0px 40px 0px 0px;border-bottom: 1px solid #e6e6e6;margin-bottom: 8px;">
			<div class="layout-header">
				<div class="logo">
					<span class="span-logo">Bridgee 企桥</span>
					<!-- <img src="static/image/element-logo.png" alt=""> -->
				</div>
				<div class="cut">
					<el-menu default-active="2" class="el-menu-cut" mode="horizontal" :ellipsis="false" @select="handleSelect">
						<el-menu-item index="1"><a class="a-system" href="../element/index0.html">Element-3</a></el-menu-item>
						<el-menu-item index="2"><a class="a-system" href="echarts.html">Echarts</a></el-menu-item>
						<el-menu-item index="3"><a class="a-system" href="../css/css.html">CSS</a></el-menu-item>
						<el-menu-item index="4"><a class="a-system" href="../antd/antd.html">Ant Design Vue</a></el-menu-item>
						
					</el-menu>
				</div>
				<div class="url"><a :href="main_url" target="_blank" style="text-decoration: none;color: #409EFF;margin-left: 12px;">单独打开</a></div>
				<div class="header-left"></div>
				<div class="toolbar">
					<el-menu :default-active="activeIndex2" class="el-menu-toolbar el-menu-cut" mode="horizontal" :ellipsis="false" @select="handleSelect2">
						<el-sub-menu index="2">
							<template #title>个人设置</template>
							<el-menu-item index="2-1">item one</el-menu-item>
							<el-menu-item index="2-2">item two</el-menu-item>
							<el-menu-item index="2-3">item three</el-menu-item>
							<el-sub-menu index="2-4">
								<template #title>item four</template>
								<el-menu-item index="2-4-1">item one</el-menu-item>
								<el-menu-item index="2-4-2">item two</el-menu-item>
								<el-menu-item index="2-4-3">item three</el-menu-item>
							</el-sub-menu>
						</el-sub-menu>
					</el-menu>
				</div>
				<div class="toolbar"><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div>
				<div class="toolbar">
					<el-dropdown style="top: 3px;">
						<span class="el-dropdown-link">
							Admin <el-icon><arrow-down></arrow-down></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>Action 1</el-dropdown-item>
								<el-dropdown-item>Action 2</el-dropdown-item>
								<el-dropdown-item>Action 3</el-dropdown-item>
								<el-dropdown-item disabled>Action 4</el-dropdown-item>
								<el-dropdown-item divided>Action 5</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<el-icon class="logout" title="退出系统" @click="logout_fn">
						<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M352 159.872V230.4a352 352 0 1 0 320 0v-70.528A416.128 416.128 0 0 1 512 960a416 416 0 0 1-160-800.128z"></path><path fill="currentColor" d="M512 64q32 0 32 32v320q0 32-32 32t-32-32V96q0-32 32-32z"></path></svg>
					</el-icon>
				</div>
			</div>
		</el-header>
		
		<el-container class="body-main">
			<!-- left -->
			<el-aside width="200px" :style="styleObj">
				<el-scrollbar :style="styleObj" style="background-color: white;">
					<el-button :style="styleObj" v-html="buttonText" @click="open_close"></el-button>
					<el-menu :default-openeds="['12']" default-active="" :collapse="isCollapse" :collapse-transition=false>
						<el-sub-menu index="1">
							<template #title>
								<el-icon><Histogram></Histogram></el-icon>
								<span>柱状图</span>
							</template>
							<el-menu-item index="bar/base.html" @click="toPage">基础柱状图</el-menu-item>
							<el-menu-item index="bar/base1.html" @click="toPage">最简单的柱状图</el-menu-item>
							<el-menu-item index="bar/base1_2.html" @click="toPage">异步数据加载</el-menu-item>
							<el-menu-item index="bar/base2.html" @click="toPage">多系列的柱状图</el-menu-item>
							<el-menu-item index="bar/base3.html" @click="toPage">柱状图样式设置</el-menu-item>
							<el-menu-item index="bar/base4.html" @click="toPage">柱条宽度和高度</el-menu-item>
							<el-menu-item index="bar/base5.html" @click="toPage">柱条间距</el-menu-item>
							<el-menu-item index="bar/base6.html" @click="toPage">为柱条添加背景色</el-menu-item>
							<el-menu-item index="bar/base7.html" @click="toPage">堆叠柱状图</el-menu-item>
							<el-menu-item index="bar/base7_2.html" @click="toPage">堆叠柱状图-2（多堆叠）</el-menu-item>
							<el-menu-item index="bar/base8.html" @click="toPage">动态排序（base）</el-menu-item>
							<el-menu-item index="bar/base8_2.html" @click="toPage">动态排序-2（官方示例）</el-menu-item>
							<el-menu-item index="bar/base8_2_1.html" @click="toPage">动态排序-2-1（改造）</el-menu-item>
							<el-menu-item index="bar/base8_2_2.html" @click="toPage">动态排序-2-2（业绩）</el-menu-item>
							<el-menu-item index="bar/base8_2_3.html" @click="toPage">动态排序-2-3（控制）</el-menu-item>
							<el-menu-item index="bar/base9.html" @click="toPage">阶梯瀑布图</el-menu-item>
							<el-menu-item index="bar/base9_0.html" @click="toPage">阶梯瀑布图-0</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="2">
							<template #title>
								<el-icon><data-line></data-line></el-icon>
								<span>折线图</span>
							</template>
							<el-menu-item index="line/base.html" @click="toPage">基础折线图</el-menu-item>
							<el-menu-item index="line/base1.html" @click="toPage">堆叠折线图</el-menu-item>
							<el-menu-item index="line/base2.html" @click="toPage">区域面积图</el-menu-item>
							<el-menu-item index="line/base3.html" @click="toPage">平滑曲线图</el-menu-item>
							<el-menu-item index="line/base4.html" @click="toPage">阶梯线图</el-menu-item>
							<el-menu-item index="line/base5.html" @click="toPage">较完整曲线图</el-menu-item>
							<el-menu-item index="line/base6.html" @click="toPage">折线图堆叠</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="3">
							<template #title>
								<el-icon><pie-chart></pie-chart></el-icon>
								<span>饼图</span>
							</template>
							<el-menu-item index="pie/base.html" @click="toPage">基础饼图</el-menu-item>
							<el-menu-item index="pie/base1.html" @click="toPage">饼图样式设置</el-menu-item>
							<el-menu-item index="pie/base2.html" @click="toPage">基础圆环图</el-menu-item>
							<el-menu-item index="pie/base2_2.html" @click="toPage">圆环图（环中显示）</el-menu-item>
							<el-menu-item index="pie/base3.html" @click="toPage">南丁格尔图（玫瑰图）</el-menu-item>
							<el-menu-item index="pie/base3_2.html" @click="toPage">玫瑰图（暗色）</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="3_2">
							<template #title>
								<el-icon><Help-filled></Help-filled></el-icon>
								<span>旭日图</span>
							</template>
							<el-menu-item index="sunburst/base.html" @click="toPage">基础旭日图</el-menu-item>
							<el-menu-item index="sunburst/base2.html" @click="toPage">旭日图样式调整</el-menu-item>
							<el-menu-item index="sunburst/base3.html" @click="toPage">旭日图样式调整2</el-menu-item>
							<el-menu-item index="sunburst/base4.html" @click="toPage">旭日图高亮</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="4">
							<template #title>
								<el-icon><Share></Share></el-icon>
								<span>散点图</span>
							</template>
							<el-menu-item index="scatter/base.html" @click="toPage">最简单的散点图</el-menu-item>
							<el-menu-item index="scatter/base1.html" @click="toPage">笛卡尔坐标系</el-menu-item>
							<el-menu-item index="scatter/base2.html" @click="toPage">散点图样式设置</el-menu-item>
							<el-menu-item index="scatter/base2_2.html" @click="toPage">多重散点图</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="4_5">
							<template #title>
								<el-icon><grid></grid></el-icon>
								<span>地理坐标/地图</span>
							</template>
							<el-menu-item index="map/base.html" @click="toPage">最简单的SVG具名元素</el-menu-item>
							<el-menu-item index="map/base1.html" @click="toPage">4个SVG具名元素</el-menu-item>
							<el-menu-item index="map/base2.html" @click="toPage">6个SVG具名元素</el-menu-item>
							<el-menu-item index="map/base3.html" @click="toPage">自定义（仅能选择）</el-menu-item>
							<el-menu-item index="map/base4.html" @click="toPage">自定义（能填写）</el-menu-item>
							<el-menu-item index="map/base99.html" @click="toPage">航班选座</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="5">
							<template #title>
								<el-icon><calendar></calendar></el-icon>
								<span>日历图</span>
							</template>
							<el-menu-item index="calendar/base.html" @click="toPage">日历图热图</el-menu-item>
							<el-menu-item index="calendar/base1.html" @click="toPage">每日业绩</el-menu-item>
							<el-menu-item index="calendar/base2.html" @click="toPage">纵向日历图</el-menu-item>
							<el-menu-item index="calendar/base3.html" @click="toPage">横向日历图</el-menu-item>
							<el-menu-item index="calendar/base4.html" @click="toPage">日历关系图</el-menu-item>
							<el-menu-item index="calendar/base5.html" @click="toPage">农历日历图</el-menu-item>
							<el-menu-item index="calendar/base6.html" @click="toPage">日历饼图</el-menu-item>
							<el-menu-item index="calendar/base7.html" @click="toPage">多日历图</el-menu-item>
							<el-menu-item index="calendar/base8.html" @click="toPage">日历图图标</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="6">
							<template #title>
								<el-icon><Tickets></Tickets></el-icon>
								<span>dataset</span>
							</template>
							<el-menu-item index="dataset/dataset.html" @click="toPage">三组矩形图</el-menu-item>
							<el-menu-item index="dataset/dataset2.html" @click="toPage">使用 dataset</el-menu-item>
							<el-menu-item index="dataset/dataset2_2.html" @click="toPage">使用 dataset-2</el-menu-item>
							<el-menu-item index="dataset/dataset3.html" @click="toPage">双坐标系</el-menu-item>
							<el-menu-item index="dataset/dataset4.html" @click="toPage">使用 dataset-4</el-menu-item>
							<el-menu-item index="dataset/dataset5.html" @click="toPage">气泡大小</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="7">
							<template #title>
								<el-icon><Pointer></Pointer></el-icon>
								<span>事件</span>
							</template>
							<el-menu-item index="event/on.html" @click="toPage">鼠标事件on</el-menu-item>
						</el-sub-menu>
						
						<el-sub-menu index="8">
							<template #title>
								<el-icon><rank></rank></el-icon>
								<span>树图</span>
							</template>
							<el-menu-item index="tree/base.html" @click="toPage">基础树图</el-menu-item>
							<el-menu-item index="tree/base1.html" @click="toPage">树图-异步加载</el-menu-item>
						</el-sub-menu>
						
						
					</el-menu>
				</el-scrollbar>
			</el-aside>

			<el-main>
				<!-- main -->
				<el-scrollbar>
					<div class="layui-body" id="iframe_div" style="bottom: 0px;">
						<iframe :src="main_url" id="iframe_body" frameborder="0" width="100%" height="100%"></iframe>
					</div>
				</el-scrollbar>
			</el-main>
		</el-container>
	</el-container>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			main_url: "tree/base.html",
			isCollapse: false,
			isTrue: true,
			styleObj: {width: '200px'},
			buttonText: "收起",
			activeIndex: '1',
			activeIndex2: '1'
		}
	},
	methods: {
		toPage(ret){
			// console.log(ret);
			// console.log(ret.index);
			this.main_url = ret.index;
		},
		handleSelect(key, keyPath){
			console.log(key);
			console.log(keyPath);
		},
		handleSelect2(key, keyPath){
			console.log(key);
			console.log(keyPath);
		},
		open_close(){
			// this.isCollapse = !this.isCollapse;
			if(this.isCollapse){
				//收起的，需要展开
				this.isCollapse = false;
				this.styleObj = {width: '200px'};
				this.buttonText = "收起";
				// console.log("展开了。。。")
			}else{
				//展开的，需要收起
				this.isCollapse = true;
				this.styleObj = {width: '64px'};
				this.buttonText = "展开";
			}
			// console.log(this.isCollapse);
		},
		logout_fn(){
			alert('logout');
		},
		
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>
